<template>
  <div>
    <div class="menu_title">跳转到菜单：</div>
    <div class="layout-scroll1 layout-scrollbar1">
      <div class="layout-scroll-views1" >
        <div style="margin:3px; display:inline-block" v-for="(item,index) in menu_list" :key="index">
          <el-button class="btn"  @click="selectMenu(item)">{{item.title}}</el-button>
        </div>
      </div>
    </div>
    <div class="menu_title">跳转到活动页：</div>
    <div class="layout-scroll1 layout-scrollbar1">
      <div class="layout-scroll-views1" >
        <div style="margin:3px; display:inline-block" v-for="(item,index) in activity_list" :key="index">
          <el-button class="btn"  @click="selectActivity(item)">{{item.title}}</el-button>
        </div>
      </div>
    </div>
     <div class="menu_title">跳转到分类：</div>
    <div class="layout-scroll1 layout-scrollbar1">
      <div class="layout-scroll-views1" >
        <div style="margin:3px; display:inline-block" v-for="(item,index) in goods_cate" :key="index">
          <el-button class="btn"  @click="selectClassify(item)">{{item.title}}</el-button>
        </div>
      </div>
    </div>
    <div class="menu_title">跳转到商品详情：</div>
    <div class="goods" >
      <control :config="config" />
      <div class="layout-content">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%; margin-top: 50px;"
      >
        <el-table-column align="center" prop="goods_sn" label="货号" />
        <el-table-column align="center" prop="title" label="商品名" />
        <el-table-column
          align="center"
          fixed="right"
          width="100"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="selectGoods(scope.row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
  </div>
</template>
<script>
import control from "../control/control";
export default {
  components: { control },
  name:'urlAddress',
  data() {
    return {
      goods_value:'',
      menu_list:[],
      activity_list:[],
      goods_cate:[],
      tableData:[],
      total: 0,
      current_page: 1,
      per_page: 14,
      loading: false,
      config: [
        { type: "text", placeholder: "请输入商品名或货号", field: "title", val: "" },
      ],
       searchWhere: {
        title: "",
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    selectMenu (item) {
      this.$emit('selectMenu',item)
    },
    selectActivity (item) {
      // /pagesD/shop/activity?id=1
      var url = '/pagesD/shop/activity?id='+item.id
      this.$emit('selectMenu',{
        path:url,
        thumb:'',
        title:item.title,
      })
    },
    selectClassify (item) {
      // /pagesD/shop/activity?id=1
      var url = '/pagesA/shopcar/classifyGoods?cate_id='+item.id
      this.$emit('selectMenu',{
        path:url,
        thumb:'',
        title:item.title,
      })
    },
    selectGoods (item) {
      //  /pagesD/shop/details?id=5
      var url = '/pagesD/shop/details?id='+item.id
       this.$emit('selectMenu',{
        path:url,
        thumb:item.thumb,
        title:item.title,
      })
    },
    init() {
      this.get('/admin/UserCenter/pathTemplate', {}, 'POST').then(e => {
        this.menu_list = e.user_list
        this.activity_list = e.Activity_list
        this.goods_cate = e.goods_cate
      })
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      this.loading = true;
      const form = {};
      const map = {};
      form.page = this.current_page;
      map.title = this.searchWhere.title;
      form.map = map;
      this.get("/admin/Goods/search", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        this.loading = false;
      });
    },

  }
}
</script>

<style scoped>
.flex_row_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.btn {
  min-width:100px;font-size:12px;text-align:center;
  padding:10px 2px;
}
.goods {
  width: 100%;
  padding:20px;
  background-color:#fff;
}
.menu_title {
  font-size:14px;font-weight:500;
  padding:5px 0px;
}
.layout-scroll1 {
    width: 100%;
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scroll-views1 {
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: #fff;
}
.layout-scroll-right {
    width: 100%;
    max-height: 670px;
    padding-right: 24px;
    padding-left: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scrollbar1::-webkit-scrollbar {
    width: 8px;
}
.layout-scrollbar1::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #999;
}
.layout-scrollbar1::-webkit-scrollbar-track {
    background-color: #ddd;
    box-shadow:inset 0 0 2px #333;
    -webkit-box-shadow: inset 0 0 2px #333;
    border-radius: 4px;
}

</style>>
